<template>
  <div class="full-width">
    <div
      id="coop"
      :style="{'background-image': 'url(' + state.detail.coverImg + ')','background-repeat':'no-repeat','background-size':'cover'}"
      class="spy-15 bg_img min-width-130">
      <div class="width-110 mx-auto">
        <p class="text-orange text-80">{{state.detail.name}}</p>
        <p class="text-orange text-80">.</p>
        <p class="text-gray text-24">Kupo Technology</p>
      </div>
    </div>
    <div class="sp_m mx-auto width-110 height-auto px-16 py-16 bg-gray-light3 rounded-15">
      <div class="flex-column">
        <img class="width-9 mb-4" :src="HomePart1" alt="02">
        <span class="text-orange text-48">{{lang === 'zh_CN' ? '合作' : 'Cooperation'}}</span>
        <span class="text-gray-light">{{state.detail1.name}}</span>
        <div class="width-1 height-1 bg-orange mt-4"></div>
      </div>
      <div class="mt-20 w-60 mx-auto">
        <cooperationPage :lang="lang"/>
      </div>
    </div>
    <div id="address" class="width-110 mx-auto my-40">
      <div class="flex-column">
        <img class="width-9 mb-4" :src="HomePart2" alt="02">
        <span class="text-orange text-48">{{lang === 'zh_CN' ? '地址' : 'Address'}}</span>
        <span class="text-gray-light">{{state.detail2.name}}</span>
        <div class="width-1 height-1 bg-orange mt-4"></div>
      </div>
      <div class="flex_between_start flex-wrap mt-10 sp_m">
        <div v-for="(i, index) in state.addressList" :key="index" class="w-45 border border-md border-y py-11 mb-3">
          <h2 class="mb-6">{{i.addressName}}</h2>
          <div class="height-5" v-html="i.content"></div>
        </div>
      </div>
    </div>
    <div id="job" class="width-110 mx-auto my-40">
      <div class="flex-column">
        <img class="width-9 mb-4" :src="HomePart3" alt="03">
        <span class="text-orange text-48">{{lang === 'zh_CN' ? '职业' : 'Jobs'}}</span>
        <span class="text-gray-light">{{state.detail3.name}}</span>
        <div class="width-1 height-1 bg-orange mt-4"></div>
      </div>
      <div class="mt-10 sp_m">
        <el-input
          v-model="searchParamList.name"
          @keyup.enter="getJobList"
          clearable
          @clear="handleClear('name')"
          class="w-100 mb-8"
          size="large"
          placeholder="Please Input"
          :prefix-icon="Search"
        />
        <div class="flex_between_start">
          <div class="w-28">
            <h3 class="pb-8">{{lang === 'zh_CN' ? '筛选' : 'Filter'}}</h3>
            <div class="w-100 border rounded-10 px-4 bg-gray-light3">
              <div
                v-for="(item, index) in state.searchParams"
                :key="item"
                :class="index < state.searchParams.length - 1 ? 'border border-bottom' : ''"
                class="py-4"
                >
                <div class="w-100 flex_between_center">
                  <span>{{lang === 'zh_CN' ? item.name : item.value}}</span>
                  <span @click="handleClick(index)" class="cursor-pointer">{{state.searchId === index ? '-' : '+'}}</span>
                </div>
                <el-input
                  v-show="state.searchId === index"
                  v-model="state.keyValue"
                  @keyup.enter="setParam(item.value)"
                  clearable
                  @clear="handleClear(item.value)"
                  class="w-100 mt-2"
                  size="large"
                  placeholder="Please Input"
                  :prefix-icon="Search"
                />
              </div>
            </div>
          </div>
          <div class="w-60">
            <h3 class="pb-8 border border-bottom border-color-dark">{{lang === 'zh_CN' ? '最新发布' : 'Latest'}}</h3>
              <div v-for="job in state.jobList" :key="job.id" @click="getJobDetail(job.id)" class="w-100 py-3 border border-bottom cursor-pointer">
                <p class="text-24">{{job.name}}</p>
                <p class="mb-4 mt-2">{{job.city}}</p>
                <p class="content">{{job.simpleContent}}</p>
              </div>
          </div>
        </div>
      </div>
    </div>
    <ContactUs/>
    <CommonFooter/>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import CommonFooter from '@/components/CommonFooter.vue'
import ContactUs from '@/components/contactUs.vue'
import HomePart1 from '@/assets/images/HomePart1.png'
import HomePart2 from '@/assets/images/HomePart2.png'
import HomePart3 from '@/assets/images/HomePart3.png'
import { onMounted, reactive, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import userStore from '@/store/index'
import { useRouter } from 'vue-router'
import urls from '@/api/index'
import cooperationPage from '@/components/cooperationPage.vue'

const lang = computed(() => userStore.state.lang)
const router = useRouter()
const state = reactive({
  detail: {},
  detail1: {},
  detail2: {},
  detail3: {},
  addressList: [],
  keyword: '',
  searchId: null,
  keyValue: '',
  searchParams: [
    {
      name: '国家/地区',
      value: 'country'
    },
    {
      name: '城市',
      value: 'city'
    },
    {
      name: '职业类别',
      value: 'type'
    },
    {
      name: '事业群',
      value: 'businessGroup'
    },
    {
      name: '招聘类型',
      value: 'employmentType'
    }],
  jobList: [],
  total: 0,
  curPage: 1
})
const searchParamList = reactive({
  name: '',
  businessGroup: '',
  city: '',
  country: '',
  type: '',
  employmentType: '',
  page: 1,
  pageSize: 10,
  lang: lang.value
})
watch(() => router.currentRoute.value.query.id, (newVal) => {
  if (router.currentRoute.value.query.id === '62d6c012e1d8375b113f70ac') {
    const address = document.getElementById('address')
    address.scrollIntoView({ block: 'center' })
  } else if (router.currentRoute.value.query.id === '62d6c01ce1d8375b113f70ad') {
    const job = document.getElementById('job')
    job.scrollIntoView({ block: 'center' })
  } else {
    const coop = document.getElementById('coop')
    coop.scrollIntoView({ block: 'center' })
  }
})
watch(() => userStore.state.lang, () => {
  getPageDetail()
  getJobList()
  getAddressList()
})
const getPageDetail = () => {
  userStore.commit('CHANGELOAD', true)
  getDetail('62c6c6016887a75deb0b5004', 'detail')
  getDetail('62d6c005e1d8375b113f70ab', 'detail1')
  getDetail('62d6c012e1d8375b113f70ac', 'detail2')
  getDetail('62d6c01ce1d8375b113f70ad', 'detail3')
}
const getDetail = (id, obj) => {
  const params = {
    id,
    lang: lang.value
  }
  urls.home.getModuleData(params)
    .then(res => {
      state[obj] = res.data
      userStore.commit('CHANGELOAD', false)
    })
    .catch(err => {
      userStore.commit('CHANGELOAD', false)
      ElMessage.error(err.msg)
    })
}
const getAddressList = () => {
  urls.concat.getAddress(lang.value)
    .then(res => {
      state.addressList = res.data
    })
    .catch(err => {
      ElMessage.error(err.msg)
    })
}
const handleClear = (param) => {
  searchParamList[param] = ''
  getJobList()
}
const handleClick = (index) => {
  if (state.searchId !== index) {
    state.searchId = index
  } else {
    state.searchId = ''
  }
}
const getJobDetail = (id) => {
  router.push({
    path: '/jobDetail',
    query: {
      id
    }
  })
  userStore.commit('ADDBREADCRUMB', [{ path: '/concatDetail', name: 'message.CONCACT', query: { id: '62d6c005e1d8375b113f70ab' } }, { path: '/concatDetail', name: 'message.JOBS', query: { id: '62d6c01ce1d8375b113f70ad' } }, { path: '/jobDetail', name: 'message.JOB_DETAIL' }])
}
const getJobList = () => {
  urls.concat.getJobList(searchParamList)
    .then(res => {
      state.jobList = res.data.items
      state.total = res.data.totalNum
      state.curPage = res.data.currentPage
    })
    .catch(err => {
      ElMessage.error(err.msg)
    })
}
const setParam = (param) => {
  searchParamList[param] = state.keyValue
  getJobList()
}
onMounted(() => {
  getJobList()
  getPageDetail()
  getAddressList()
  if (router.currentRoute.value.query.id === '62d6c012e1d8375b113f70ac') {
    const address = document.getElementById('address')
    address.scrollIntoView({ block: 'center' })
  } else if (router.currentRoute.value.query.id === '62d6c01ce1d8375b113f70ad') {
    const job = document.getElementById('job')
    job.scrollIntoView({ block: 'center' })
  } else {
    const coop = document.getElementById('coop')
    coop.scrollIntoView({ block: 'center' })
  }
})
</script>

<style lang="scss">
.bg_img {
  background: url("@/assets/images/introduce.jpg") no-repeat;
  background-size: 100%;
}
.sp_m{
  margin-top: -120px;
  p{
    font-size: 18px
  }
}
.out:hover img{
  transform: scale(1.1);
}
.out img{
  transition: all .5s ease;
  object-fit: cover;
}
.content{
  width:100%;
  height: 50px;
  margin-bottom: 32px;
  font-size: 14px;
  color: #555;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  word-break:break-all;
}
</style>
